<template>
  <!-- <div class="login"> -->
    <van-form ref="regForm" class="regForm" @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="LoginParams.loginname"
          name="tel"
          label="用户名"
          placeholder="用户名"
          :rules="LoginRules.tel"
        />
        <van-field
          v-model="LoginParams.password"
          :type="passwordShow ? 'text' : 'password'"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="LoginRules.password"
          :right-icon="passwordShow ? 'eye-o' : 'closed-eye'"
          @click-right-icon="onClickIcon"
        />
        <van-field>
            <template #label>
                <router-link to="/register" style=color:#1989fa>去注册</router-link>
            </template>
            <template #button>
                <router-link to="">忘记密码?</router-link>
            </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
  <!-- </div> -->
</template>


<script setup lang="ts">
import { RouterLink,useRouter,useRoute } from 'vue-router';
// import { reactive,ref } from 'vue';
import {reactive,ref,toRef,getCurrentInstance} from 'vue'
import { reg } from '@/utils/rules';
// import { doLoginAPI } from '@/api/user';
import { useAuthStore } from '@/stores/auth';
import { showFailToast, showSuccessToast } from 'vant';


const AuthStore = useAuthStore()
const {loginAndUpdateAuth} = AuthStore 

const router = useRouter();
const route = useRoute();

const LoginParams = reactive<LoginParamsRaw>({
  loginname:'',
  password:''
})
const passwordShow =ref(false)
const onClickIcon = () => {
    passwordShow.value = !passwordShow.value;
}
const LoginRules = reactive<LoginRules>({
  tel: [
        { required: true, message: '请填写用户名/手机号/账号', trigger: "onChange" },
        { pattern: reg.phone, message: '请填写正确的手机号', trigger: "onChange" },
        // {validator:validateTel, message: '手机号已被注册', trigger: "onChange"}
    ],
    password: [
        { required: true, message: '请填写密码', trigger: "onChange" },
        { pattern: reg.pwd, message: '请输入6-16位的数字加字母', trigger: "onChange" },
    ]
})
// const CodeParams = reactive({
//   tel:toRef(RegParams,"tel"), //保持响应性 ref自动解包
//   telcode:""
// })
// const LoginRules = reactive({
//   tel:[{required: true, message: '请填写用户名'}],
//   password:[{required: true, message: '请填写密码'}],
//   telcode:[{required: true, message: '请填写密码'}]
// })
const onSubmit= async ()=>{
  try{
   let result = await loginAndUpdateAuth(LoginParams)
  //  console.log(result);
   showSuccessToast('登录成功')
   router.push("/")
  }catch(err:any){
    // console.log();
    showFailToast(err.message)
  }
  
}
</script>

<style lang="scss" scoped>
// .login {
//   background-color: #f7f8fa;

  .regForm {
    margin-top: 20px;
  }
// }
</style>